﻿<script setup lang="ts" name="OtherAnchor">
const router = useRouter()

const jumpOtherAnchor = (value) => {
  document.querySelector('.other-anchor-' + value).scrollIntoView({ behavior: 'smooth', block: 'start' })
}
const jumpOtherPageAnchor = (value) => {
  router.push('/Functions/DynamicAnchor/RichTextAnchor?anchor=' + value)
}
</script>

<template>
  <div class="other-anchor-wrap">
    <h2>组件内锚点</h2>
    <div class="other-anchor other-anchor-0">
      <p>众里寻他千百度。蓦然回首，那人却在，灯火阑珊处</p>
      <p>当前锚点：other-anchor-0</p>
      <el-button type="primary" plain @click="jumpOtherAnchor('2')">跳转到当前页面组件内锚点other-anchor-2</el-button>
    </div>
    <div class="other-anchor other-anchor-1">
      <p>浮世万千，吾爱有三。日，月与卿。日为朝，月为暮，卿为朝朝暮暮。</p>
      <p>当前锚点：other-anchor-1</p>
      <el-button type="primary" plain @click="jumpOtherPageAnchor('a3')">跳转到富文本锚点页面内锚点anchor-a3</el-button>
    </div>
    <div class="other-anchor other-anchor-2">
      <p>浮世万千，不得有三，水中月，镜中花，梦中你。月可求，花可得，唯你求而不得。</p>
      <p>当前锚点：other-anchor-2</p>
      <el-button type="primary" plain @click="jumpOtherPageAnchor('.other-anchor-2')">跳转到富文本锚点页面组件内锚点other-anchor-2</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.other-anchor-wrap{
  h2{
    padding: 40px 0;
    font-size: calc(var(--el-font-size-medium) * 2);
    line-height: 2;
    text-align: center;
  }

  .other-anchor{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .el-button{
      margin-top: 20px;
    }
  }

  .other-anchor-0{
    height: 80vh;
    background: var(--el-color-info-light-9);
  }

  .other-anchor-1{
    height: 60vh;
    background: var(--el-color-error-light-8);
  }

  .other-anchor-2{
    height: 80vh;
    background: var(--el-color-primary-light-8);
  }
}
</style>
